<template>
  <swiper class="swiper" :current="swiperCurrent" ref="swiper" @change="change" :circular="circular"
    :indicator-dots="false" :autoplay="false" :duration="duration">
    <swiper-item v-for="(item, index) in swiperList" :key="index">
      <!-- 试题插槽 -->
      <slot v-if="list[swiperList[index]]" :item="list[swiperList[index]]" :index="swiperList[index]"></slot>
    </swiper-item>
  </swiper>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import type { SwiperOnChangeEvent } from '@uni-helper/uni-types'
  import type { LearnBaseQuestionInfo } from '@/api/base/types';
  const props = defineProps<{
    list: LearnBaseQuestionInfo[],//试题列表
    topicIndex: number,//题目位置
  }>()
  const emits = defineEmits<{
    changeTopic: [topicIndex: number],
  }>()

  // 试题的总量
  const dataLength = ref(0)
  // swiper当前位置
  const swiperCurrent = ref(0)
  // 当前题目的位置
  const currentTopicIndex = ref(0)
  // 保存3个试题
  const swiperList = ref<number[]>([])
  // swiper是否循环轮播
  const circular = ref(false)
  // swiper动画切换时长
  const duration = ref(200)

  // swiper当前位置发生变化
  const change = (event: SwiperOnChangeEvent) => {
    // 设置默认可以轮播
    circular.value = true
    // 设置动画切换时长
    duration.value = 200
    // swiper当前位置
    let currentIndex = event.detail.current
    // 试题位置
    currentTopicIndex.value = swiperList.value[currentIndex]
    // 调用试题位置变化时间，通知答题面板当前试题的索引
    emits('changeTopic', currentTopicIndex.value)
    // 如果当前试题是第一题，则位置改为0，以便不能左滑动切换试题
    if (swiperList.value[currentIndex] === 0) {
      // 设置swiper不能轮播
      circular.value = false
      // 设置swiper不动画时长为0
      duration.value = 0
      // 设置第一题
      swiperList.value[0] = 0
      swiperCurrent.value = 0
      return false
    }

    if (swiperList.value[currentIndex] === dataLength.value - 1) {
      circular.value = false
      duration.value = 0
      swiperList.value[2] = dataLength.value - 1
      swiperCurrent.value = 2
      return false
    }

    switch (currentIndex) {
      case 0:
        {
          swiperList.value[1] = swiperList.value[0] + 1
          swiperList.value[2] = swiperList.value[0] - 1
          break
        }
      case 1: {
        swiperList.value[2] = swiperList.value[1] + 1
        swiperList.value[0] = swiperList.value[1] - 1
        break
      }
      case 2: {
        swiperList.value[0] = swiperList.value[2] + 1
        swiperList.value[1] = swiperList.value[2] - 1
        break
      }
    }

    if (swiperList.value[currentIndex] != 0) {
      swiperCurrent.value = currentIndex
    }
  }

  onMounted(() => {
    dataLength.value = props.list.length
    handleList(currentTopicIndex.value)
  })

  // 初始化和指定题处理
  const handleList = (index: number) => {
    circular.value = true





    if (index == 0 || index == 1) {
      circular.value = false
      duration.value = 0
      swiperList.value[index] = index
      swiperCurrent.value = index
    }

    if (index == dataLength.value - 1) {
      circular.value = false
      duration.value = 0
      swiperList.value[2] = index

      swiperCurrent.value = 2
    }

    if (index == dataLength.value - 2) {
      circular.value = false
      duration.value = 0
      swiperList.value[1] = index

      swiperCurrent.value = 1
    }

    let current = swiperCurrent.value

    switch (current) {
      case 0:
        {
          swiperList.value[0] = index
          swiperList.value[1] = swiperList.value[0] + 1
          swiperList.value[2] = swiperList.value[0] - 1
          break
        }
      case 1: {
        swiperList.value[1] = index
        swiperList.value[0] = swiperList.value[1] - 1
        swiperList.value[2] = swiperList.value[1] + 1
        break
      }
      case 2: {
        swiperList.value[2] = index
        swiperList.value[0] = swiperList.value[2] + 1
        swiperList.value[1] = swiperList.value[2] - 1
        break
      }
    }
    emits('changeTopic', index)
  }

  // 跳转到指定题
  const pickerTopic = (topicIndex: number) => {
    handleList(topicIndex)
  }
  // 上一题
  const goPreviousTopic = () => {
    if (currentTopicIndex.value > 0) {
      swiperCurrent.value = (swiperCurrent.value - 1)
    }
  }
  // 下一题
  const goNextTopic = () => {
    console.log('currentTopicIndex.value', currentTopicIndex.value)
    console.log('dataLength.value', dataLength.value)
    if (currentTopicIndex.value < dataLength.value - 1) {
      swiperCurrent.value = (swiperCurrent.value + 1) % 3
    }
  }
  // 暴露方法
  defineExpose({
    pickerTopic,
    goPreviousTopic,
    goNextTopic,
  })

</script>

<style scoped>
  .swiper {
    height: 100%
  }
</style>
